<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>菜单管理</title>
        <script type="text/javascript" src="/core/file.js"></script>
        <script type="text/javascript" src="/js/sys/user/list.js"></script>
        <script src="https://cdn.staticfile.org/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
        <script src="https://avuejs.com/cdn/xlsx.full.min.js"></script>
        <script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
    </head>
    <body>
        <div id="app" class="box">
            <avue-crud
                    @sortable-change="sortableChange"
                    @row-click="handleRowClick"
                    ref="crud"
                       v-model="form"
                       :page="page"
                       :data="tableData"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       @on-load="getList"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @row-del="rowDel">
                <template slot="menu" slot-scope="scope">
                    <el-button v-if="buttonPermissionsCheck('SYS_USER_SET_ROLE')"  :size="scope.size" icon="el-icon-s-tools" @click="setRoleOpen(scope.row)" type="text">设置角色</el-button>
                    <el-button v-if="buttonPermissionsCheck('SYS_USER_RESET_PASSWORD')" :size="scope.size" icon="el-icon-refresh" @click="resetPassword(scope.row)" type="text">重置密码</el-button>
                </template>
                <template slot="menuLeft">
                    <el-button @click="jump">元素配置</el-button>
                </template>
            </avue-crud>


            <el-dialog
                    title="设置用户角色"
                    :visible.sync="dialogVisible"
                    :close-on-click-modal="false"
                    width="25%">
                <el-select style="width: 100%" v-model="rolesVal" multiple placeholder="请选择">
                    <el-option
                            v-for="item in roles"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="setRoles()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </body>
    <script>
        var vm = new createVue({
            el: '#app',
            data: {
                //访问接口前缀
                url:"sysuser",
                //弹框显示判断
                dialogVisible:false,
                //角色集合
                roles:[],
                //设置的角色集合
                rolesVal:[],
            },
            created() {
                this.init();
            },

            methods: {
                sortableChange(oldindex, newindex, row, list) {
                    this.data=[]
                    this.$nextTick(()=>{
                        this.data=list;
                    })
                    console.log(oldindex, newindex, row, list)
                },
                    handleRowClick (row, event, column) {
                    row.$cellEdit=true
                },
                jump() {
                    window.location.href = "/sys/page/configuration.html?" + this.url;
                },
                //设置用户角色
                setRoles(){
                    postJson("/"+this.url+"/setRoles",{
                        id:this.obj.id,
                        roles:this.rolesVal,
                    },res=>{
                        this.dialogVisible=false;
                        this.$message.success("操作成功！");
                        this.searchChange();
                    })
                },

                //打开设置角色弹框
                setRoleOpen(row){
                    this.obj=row;
                    this.dialogVisible=true;
                },

                //重置密码
                resetPassword(row){
                    this.$confirm('是否确认重置密码？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        post("/sys-user/resetPassword",{id:row.id},res=>{
                            this.$message.success("操作成功！");
                        })
                    })
                },
                //初始化
                init(){
                    //获取所有角色
                    get("/sys-role/findList",res=>{
                        this.roles=res;
                    })
                    var newoption = this.tableOption;
                    $.ajax({
                        type: "GET",
                        url: "http://"+window.location.host+"/SqlInit/getTemplate/sys_user",
                        dataType: "json",
                        success: function (data) {
                            newoption.column = []
                            for (let i = 0; i < data.column.length; i++) {
                                newoption.column.push(data.column[i]);
                            }
                        }
                    })
                }
            }
        })
    </script>
</html>